import { View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import React, { useState, useEffect } from 'react'
import CustomPopup from '../customPopup'
import classnames from 'classnames'
import { CalendarPicker, Input, Popup } from 'antd-mobile'
import LgButton from '../../components/button'
import styles from './index.module.scss'
import dayjs from 'dayjs'

type FilterPropsType = {
  isOpened: boolean
  setIsOpened: (opened: boolean) => void
  handelFiltration: () => void
  typeId?: string
  departmentId?: string
  setTypeId?: (value: string) => void
  setDepartmentId?: (value: string) => void
  startTime?: string
  endTime?: string
  typeList?: any[]
  departmentList?: any[]
  handleDateChange?: (date: any) => void
}

function Filter(props: FilterPropsType) {
  const {
    typeId = '',
    departmentId = '',
    isOpened,
    setIsOpened,
    setTypeId = () => {},
    setDepartmentId = () => {},
    startTime = dayjs().format('YYYY-MM-DD HH:mm:ss'),
    endTime = dayjs().format('YYYY-MM-DD HH:mm:ss'),
    handelFiltration = () => {},
    typeList = [],
    departmentList = [],
    handleDateChange = () => {},
  } = props

  const [datePikerVisible, setDatePikerVisible] = useState(false)

  return (
    <>
      <CustomPopup
        title={'筛选'}
        isOpened={isOpened}
        className={styles['filter-container']}
        setIsOpened={setIsOpened}
      >
        <View className={styles['filter-wrapper']}>
          {typeList.length > 0 && (
            <View className={styles['filter-item']}>
              <View className={styles['filter-title']}>类型</View>
              <View className={styles['filter-content']}>
                {typeList.map((t, idx) => {
                  const { typeId: tId, typeName } = t
                  const defaultOptClass = styles['filter-opt']
                  const selectedClass = styles.selected
                  const optClass = classnames({
                    [defaultOptClass]: true,
                    [selectedClass]: tId === typeId,
                  })
                  return (
                    <View key={typeId + idx} className={optClass} onClick={() => setTypeId(tId)}>
                      {typeName}
                    </View>
                  )
                })}
              </View>
            </View>
          )}
          {departmentList.length > 0 && (
            <View className={styles['filter-item']}>
              <View className={styles['filter-title']}>部门</View>
              <View className={styles['filter-content']}>
                {departmentList.map((d, idx) => {
                  const { departmentId: depId, departmentName } = d
                  const defaultOptClass = styles['filter-opt']
                  const selectedClass = styles.selected
                  const optClass = classnames({
                    [defaultOptClass]: true,
                    [selectedClass]: depId === departmentId,
                  })
                  return (
                    <View
                      key={depId + idx}
                      className={optClass}
                      onClick={() => setDepartmentId(depId)}
                    >
                      {departmentName}
                    </View>
                  )
                })}
              </View>
            </View>
          )}
          <View className={styles['filter-item']}>
            <View className={styles['filter-title']}>时间范围</View>
            <View className={styles['date-range']}>
              <Input
                className={styles.ipt}
                placeholder='请输入内容'
                value={endTime ? `${startTime} ~ ${endTime}` : `开始时间~结束时间`}
                onClick={() => setDatePikerVisible(true)}
              />
            </View>
          </View>
          <View className={styles['filter-btns']}>
            <LgButton type='D' width={324} height={88} onClick={() => setIsOpened(false)}>
              取消
            </LgButton>
            <LgButton type='B' width={324} height={88} onClick={handelFiltration}>
              确定
            </LgButton>
          </View>
        </View>
      </CustomPopup>
      <CalendarPicker
        visible={datePikerVisible}
        selectionMode='range'
        value={[new Date(startTime), new Date(endTime)]}
        onClose={() => setDatePikerVisible(false)}
        onMaskClick={() => setDatePikerVisible(false)}
        onChange={val => handleDateChange(val)}
      />
    </>
  )
}
export default Filter
